<template>
  <div>
<h1>显示</h1>
 名称：<input type="text" v-model="tt">

 类型: <select v-model="ttt">
              <option value="">请选择</option>
              <option v-for="item in Xlk" :value="item.id">{{item.lxingcname}}</option>
            </select> 

<input type="button" value="查询" @click="Show">

<input type="button" value="批量删除" class="btn btn-success" @click="DeleSc">

<input type="button" value="批量好" class="btn btn-success" @click="Updazt(1)">

<input type="button" value="批量不好" class="btn btn-success" @click="Updazt(0)">
  <table class="table table-bordered">
    <tbody>
      <tr>
        <th>
          <input type="checkbox" v-model="array" @change="Quan">
        </th>
        <th>名称</th>
        <th>图片</th>
        <th>类型</th>
        <th>状态</th>
        <th>操作</th>
      </tr>

      <tr v-for="item in info">
        <td>
          <input type="checkbox" :value="item.id" :checked="Sing" @change="Fanxu" v-model="Alltype">
        </td>
        <td>{{item.cnmae}}</td>
        <td><img :src="item.photo" width="130" height="120" alt=""></td>
        <td>
          <span v-if="item.lxin==1" style="color: blue;">小猫</span>
          <span v-if="item.lxin==2" style="color:brown;">小狗</span>
          <span v-if="item.lxin==3" style="color: red;">大耗子</span>
        </td>
        <td>{{item.zt==1?"好":"不好"}}</td>
        <td>
          <input type="button" class="btn btn-success" value="编辑" @click="BJ(item.id)">
        </td>
      </tr>
    </tbody>
  </table>
  </div>
  共{{page.pagecount}}数据，每页显示{{page.size}}条，当前{{page.index}}/{{page.pageindex}}页
  <a href="#" @click="p('sy')">首页</a>
  <a href="#" @click="p('syy')">上一页</a>
  <a href="#" @click="p('dy')">1</a>
  <a href="#" @click="p('de')">2</a>
  <a href="#" @click="p('ds')">3</a>
  <a href="#" @click="p('xyy')">下一页</a>
  <a href="#" @click="p('wy')">尾页</a>

  <select v-model="page.size" @change="YXH">
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
  </select>

  <input type="text" v-model="page.index">
  <input type="button" value="跳转" @click="Tz(page.index)">
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,reactive,onMounted} from 'vue'
import { useRoute,useRouter } from 'vue-router';
let route=useRoute();
let router=useRouter();

const info:any=ref([{
  "id": 0,
  "cnmae": "",
  "zt": 1,
  "lxin": 0,
  "photo": "",
}])

const page=ref({
  index:1,
  size:2,
  pagecount:0,
  pageindex:0,
})
onMounted(()=>{
  Show();
  Xlak();
})

const Xlk =ref([{
    "id": 0,
    "lxingcname": ""
}])

//下拉框绑定
const Xlak=()=>{
  axios.get("https://localhost:7268/api/Tad/Xlk").then(res=>{
   Xlk.value=res.data
  })
}

//定义的查询变量
let tt= ref([]);
let ttt= ref([]);

//显示
const Show=()=>{
  axios.get("https://localhost:7268/api/Tad/Show",{
    params:{
      Usercnaem:tt.value,
      id:ttt.value,
      index:page.value.index,
      size:page.value.size,
    }
  })
  .then(res=>{
    info.value=res.data.list,
    page.value.pagecount=res.data.pagecount,
    page.value.pageindex=res.data.pageindex,
    console.log(res);
  })
}

//页序号
const YXH=()=>{
  Show();
}

//文本框跳转分页
const Tz=(e:any)=>{
if(e<1)
{
  page.value.index=1;
  return;
}
if(e>page.value.pageindex)
{
  page.value.index=page.value.pageindex;
  return
}
page.value.index=e;
Show();
}

//分页
const p=(e:any)=>{
switch(e){
  case 'sy':
    if(page.value.index==1)
    {
      alert('当前页"第一页"');
      return;
    }
    page.value.index=1;
    break;

    case 'syy':
    if(page.value.index==1)
    {
      alert('当前页"第一页"');
      return;
    }
    page.value.index=page.value.index-1;
    break;
  

    case 'xyy':
    if(page.value.index==page.value.pageindex)
    {
      alert('当前页"最后一页"');
      return;
    }
    page.value.index=page.value.index+1;
    break;
    
    case 'wy':
    if(page.value.index==page.value.pageindex)
    {
      alert('当前页"最后一页"');
      return;
    }
    page.value.index=page.value.pageindex;
    break;

    case 'dy':
    page.value.index=1;
    break;

    case 'de':
    page.value.index=2;
    break;

    case 'ds':
    page.value.index=3;
    break;
}
Show();
}

//全选
const array =ref(false);
const Alltype=ref([]);
const Sing=ref(false);
 const Quan=()=>{
if(array.value==true)
{
  Sing.value=true;
   Alltype.value=info.value.map((e:any)=>{
    return e.id;
   })
}
else{
  Sing.value=false;
  Alltype.value=[];
}
}
//反选
 const Fanxu=()=>{
   if(Alltype.value.length==page.value.size)
   {
    array.value=true;
   }
   else{
    array.value=false;
   }
 }

 //批量删除
const DeleSc=()=>{
   if(Alltype.value.length==0)
   {
    alert('至少选择一项');
    return;
   }
   if(confirm('确认要删除吗'))
   {
    axios.get("https://localhost:7268/api/Tad/Delsc",{
      params:{
        id:Alltype.value.toString()
      }
    })
    .then(res=>{
      if(res.data>0)
    {
      alert('删除成功');
      array.value=false;
      Alltype.value=[];
      Show();
    }
    else{
      alert('删除失败');
      return;
    }
    })
   }
 }
 const BJ=(id:any)=>{
   router.push({
    path:'/UpdaView',
    query:{
      id:id,
    }
   })

 }
 
 const Updazt=(ada:any)=>{
   if(Alltype.value.length==0)
   {
    alert("至少选择一项");
    return;
   }
   if(confirm("确认修改吗"))
   {
    axios.get("https://localhost:7268/api/Tad/Updazt",{
      params:{
        id:Alltype.value.toString(),
        ada:ada,
      }
    })
    .then(res=>{
      if(res.data>0)
    {
      alert("修改成功");
      Alltype.value=[];
      array.value=false;
      Show();
    }
    else{
      alert("修改失败");
      return;
    }
    })
   }
 }
</script>

<style scoped>

</style>